<template>
  <view v-if="subList[0]">
    <view class="search-box">
      <MySearch bgc="#f7f7f7" radius="30" text="搜索商品"></MySearch>
    </view>
    <view style="display:flex">
      <scroll-view scroll-y :show-scrollbar="false" :style="{'height':windowHeight + 'px','width':'25%'}">
        <view :class="{'name':true,active: activeId === item.category_id }" v-for="item in categoryList" :key="item.category_id" @click="tabCategory(item.category_id)">{{item.name}}</view>
      </scroll-view>
      <scroll-view v-if="subList[0]" scroll-y enable-flex :show-scrollbar="false" :style="{'height':windowHeight + 'px'}" class="lv2-box">
        <view class="lv2-item" v-for="item in subList" :key="item.category_id" @click="goListPage(item.category_id)">
          <image :src="item.image.external_url" />
          <view>{{item.name}}</view>
        </view>
      </scroll-view>
      <view v-else>敬请期待~</view>
    </view>
    
  </view>
</template>

<script>
  import MySearch from '@/components/MySearch'
  export default {
    components:{
      MySearch
    },
    data(){
      return {
        windowHeight:'',
        categoryList:[],
        subList:[],
        activeId:'',
      }
    },

    async created(){
      this.windowHeight = uni.getWindowInfo().windowHeight - 100
      await this.getCategoryList()
      this.tabCategory(10016)
    },

    methods:{
      async getCategoryList(){
      const {data} = await this.$http.get('/category/list')
      this.categoryList = data.list
      },
      tabCategory(id){
        this.activeId = id
        this.subList = []
        const temp = this.categoryList.find(item=>item.category_id === id).children
        if (temp) this.subList = temp
      },
      goListPage(id){
        uni.navigateTo({
          url:'/pages_sub1/product-list/product-list?cid=' + id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-box {
    height:120rpx;
    background-color:f1f1f2;
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .name{
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    background-color: #f8f8f8;
    &.active{
      position: relative;
      background-color: #fff;
      color: red;
      &::before {
        content:'';
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 2%;
        height: 50%;
        background-color: red;
      }
    }

  }
  .lv2-box{
    width:80%;
    .lv2-item {
      display: inline-block;
      box-sizing: border-box;
      margin-bottom: 30rpx;
      width: 33.33%;
      height: 200rpx;
      padding: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
      view {
        font-size: 26rpx;
        text-align: center;
      }
    }
  }
</style>